<template>
	<view class="box">
		<view class="data">
			请留言，我们将尽快联系并解决您的问题。
		</view>
		<view class="data1">
			<text>问题描述</text><textarea v-model="describe" placeholder="请输入"></textarea>
		</view>
		<view class="data2">
			<text>描述附件</text>
			<view class="example-body">
				<uni-file-picker v-model="imageValue" limit="5" file-mediatype="all" title="最多选择5个文件" @select="select"></uni-file-picker>
			</view>

		</view>
		<view class="data3">
			<text>姓名</text><text>{{data[0].username}}</text>
		</view>
		<view class="data3">
			<text>邮箱</text><input v-model="email" type="text" placeholder="请输入" />
		</view>
		<view class="data2">
			<text>电话</text><text>{{data[0].phone}}</text>
		</view>
		<button @click="addfeedback" type="primary">提交</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	let imgs = ref([])
	let describe=ref('')
	let email = ref('')
	let data=ref(JSON.parse(localStorage.getItem('data')))
	let imageValue = ref([])
let addfeedback=()=>{
	console.log(imageValue.value);
	uni.request({
		url:'http://127.0.0.1:3000/xaw/addfeedback',
		method:"POST",
		data:{
			name:data.value[0].username,
			imgurl:imgs.value,
			email:email.value,
			phone:data.value[0].phone,
			describe:describe.value
		},
		success() {
			imgs.value=[]
			imageValue.value=[]
			email.value=''
			describe.value=''
			uni.showToast({
				title:"添加成功",
				icon:'success'
			})
		}
	})
}
	let select = (files : any) => {
		uni.uploadFile({
			url: 'http://127.0.0.1:3000/xaw/upload',
			filePath: files.tempFilePaths[0],
			name: 'file',
			success(res:any) {
				let a=JSON.parse(res.data)
				imgs.value.push(a.fileurl)
				
			}
		})
	}
</script>

<style scoped lang="scss">
	.box {
		button{
			position: fixed;
			width: 100%;
			bottom: 10rpx;
		}
		.data3 {
			width: 750rpx;
			min-height: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #EEEEEE;
		
			text {
				color: #5E5E5E;
			}
			input{
				width: 500rpx;
			}
			textarea {
				width: 500rpx;
				height: 200rpx;
		
			}
		}
		.data1 {
			width: 750rpx;
			height: 260rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #EEEEEE;

			text {
				color: #5E5E5E;
			}

			textarea {
				width: 500rpx;
				height: 200rpx;

			}
		}

		.data2 {
			.example-body{
				width: 500rpx;
				height: 150rpx;
			}
			width: 750rpx;
			height: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #EEEEEE;

			text {
				color: #5E5E5E;
			}

			textarea {
				width: 500rpx;
				height: 200rpx;

			}
		}

		.data {
			width: 750rpx;
			height: 110rpx;
			line-height: 110rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			border-top: 1px solid #EEEEEE;
			border-bottom: 1px solid #EEEEEE;
		}

	}
</style>